<template>
    <view class="vip-form-wrap">
        <!-- 拒绝原因提示 -->
        <view class="reject-notice" v-if="memberInfo && memberInfo.auditStatus === 2">
            <view class="reject-content">
                <view class="reject-title">申请被拒绝</view>
                <view class="reject-reason">{{ memberInfo.reason || '申请未通过审核' }}</view>
            </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading" v-if="loading">
            <text>加载中...</text>
        </view>

        <view class="title" v-if="!loading">信息填写</view>

        <view class="form-box" v-if="!loading">
            <!-- 会员编号（只读） -->
            <view class="form-item">
                <view class="label">会员编号</view>
                <input class="input" :value="formData.memberNo" placeholder="-" disabled />
            </view>
            <!-- 照片上传 -->
            <view class="form-item avatar-upload">
                <view class="label">个人照片</view>
                <view class="upload-area" @click="chooseavatar">
                    <view class="upload-placeholder" v-if="!formData.photo">
                        <view class="upload-icon-wrapper">
                            <image src="../../static/edit.png" mode="widthFix" class="upload-icon"></image>
                        </view>
                    </view>
                    <view class="uploaded-container" v-else>
                        <image :src="formData.photo" class="uploaded-avatar" mode="aspectFill"></image>
                        <view class="upload-overlay">
                            <view class="overlay-content">
                                <image src="../../static/edit.png" mode="widthFix" class="overlay-icon"></image>
                                <text class="overlay-text">重新上传</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 必填项 -->
            <view class="form-item">
                <view class="label required">姓名</view>
                <input class="input" v-model="formData.realName" placeholder="请输入" @blur="validateField('realName')" />
            </view>
            <view class="error-tip" v-if="errors.realName">{{ errors.realName }}</view>

            <!-- 身份证号 -->
            <view class="form-item">
                <view class="label required">身份证号</view>
                <input class="input" v-model="formData.idNo" placeholder="请输入" 
                    @blur="validateIdCardAndExtractInfo" />
            </view>
            <view class="error-tip" v-if="errors.idNo">{{ errors.idNo }}</view>

            <view class="form-item">
                <view class="label required">性别</view>
                <picker class="picker" :value="genderIndex" :range="genderOptions" @change="onGenderChange">
                    <view class="picker-text" :data-placeholder="'请选择'">{{ getGenderText(formData.gender) }}</view>
                </picker>
            </view>
            <view class="error-tip" v-if="errors.gender">{{ errors.gender }}</view>
            
            <view class="form-item">
                <view class="label">出生年月</view>
                <picker class="picker" mode="date" :value="formData.birthday" @change="onBirthdayChange">
                    <view class="picker-text" :data-placeholder="'年/月/日'">{{ formData.birthday || '' }}</view>
                </picker>
            </view>
            
            <view class="form-item">
                <view class="label">民族</view>
                <picker class="picker" :value="nationalityIndex" :range="nationalityOptions" @change="onNationalityChange">
                    <view class="picker-text" :data-placeholder="'请选择'">{{ formData.nationality || '' }}</view>
                </picker>
            </view>

            <!-- 注释掉其他字段 -->
            <!-- <view class="form-item">
                <view class="label required">联系电话</view>
                <input class="input" v-model="formData.contactPhone" placeholder="请输入" type="number"
                    @blur="validateField('contactPhone')" />
            </view>
            <view class="error-tip" v-if="errors.contactPhone">{{ errors.contactPhone }}</view>

            <view class="form-item">
                <view class="label">工作电话</view>
                <input class="input" v-model="formData.telephone" placeholder="请输入" type="number"
                    @blur="validateField('telephone')" />
            </view>
            <view class="error-tip" v-if="errors.telephone">{{ errors.telephone }}</view>

            <view class="form-item">
                <view class="label">政治面貌</view>
                <picker class="picker" :value="politicaIndex" :range="politicaOptions" @change="onPoliticaChange">
                    <view class="picker-text" :data-placeholder="'请选择'">{{ formData.politica || '' }}</view>
                </picker>
            </view>

            <view class="form-item">
                <view class="label">电子邮箱</view>
                <input class="input" v-model="formData.email" placeholder="请输入" type="email"
                    @blur="validateField('email')" />
            </view>
            <view class="error-tip" v-if="errors.email">{{ errors.email }}</view>

            <view class="form-item">
                <view class="label">邮寄地址</view>
                <input class="input" v-model="formData.address" placeholder="请输入" />
            </view>

            <view class="form-item">
                <view class="label">职业</view>
                <input class="input" v-model="formData.career" placeholder="请输入" />
            </view>

            <view class="form-item">
                <view class="label">文化程度</view>
                <picker class="picker" :value="educationIndex" :range="educationOptions" @change="onEducationChange">
                    <view class="picker-text" :data-placeholder="'请选择'">{{ formData.education || '' }}</view>
                </picker>
            </view>
        </view>

        <view class="title" v-if="!loading">入会信息</view>
        <view class="form-box" v-if="!loading">
            <view class="form-item">
                <view class="label required">入会机构</view>
                <picker class="picker" :value="regUnitIndex" :range="regUnitOptions" @change="onRegUnitChange">
                    <view class="picker-text" :data-placeholder="'请选择'">{{ formData.regUnit || '' }}</view>
                </picker>
            </view>
            <view class="error-tip" v-if="errors.regUnit">{{ errors.regUnit }}</view>
            
            <view class="form-item">
                <view class="label required">是否加入青少年会员</view>
                <picker class="picker" :value="isTeenagerIndex" :range="isTeenagerOptions" @change="onIsTeenagerChange">
                    <view class="picker-text" :data-placeholder="'请选择'">{{ formData.isTeenagerText || '' }}</view>
                </picker>
            </view>
            <view class="error-tip" v-if="errors.isTeenager">{{ errors.isTeenager }}</view>
        </view>
        
        <view class="form-note">注：青少年会员要求18岁以下，或在校大学生</view> -->
        </view>

        <view class="footer-btn" v-if="!loading">
            <view class="primary-btn" @click="submitForm">
                <text v-if="!memberInfo">提交</text>
                <text v-else-if="memberInfo.auditStatus == 0">审核中，重新申请</text>
                <text v-else-if="memberInfo.auditStatus == 1">申请修改</text>
                <text v-else-if="memberInfo.auditStatus == 2">已拒绝，重新申请</text>
                <text v-else>提交</text>
            </view>
        </view>






    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
    validateRequired,
    validatePhoneWithError,
    validateEmailWithError,
    validateDate,
    validateSelect,
    validateIdCardWithError
} from '@/utils/validation.js'
import { editMemberCard, getMemberCard, getUnitList } from '@/utils/api.js'
import config from '@/config/index.js'
import { uploadFile, imageUrl } from '@/utils/request.js'

// 会员信息
const memberInfo = ref(null)
const loading = ref(false)

// 表单数据
const formData = reactive({
    memberNo: '', // 会员编号（只读）
    photo: '', // 个人照片
    realName: '', // 姓名
    gender: '', // 性别 1男2女
    idNo: '', // 身份证号
    birthday: '', // 生日
    nationality: '' // 民族
    // 以下字段暂时注释
    // contactPhone: '',
    // telephone: '',
    // politica: '',
    // isJoin: 0, // 默认0
    // isJoinText: '',
    // email: '',
    // address: '',
    // career: '',
    // education: '',
    // regUnit: '', // 入会机构
    // isTeenager: 0, // 是否为青少年，默认0否
    // isTeenagerText: '' // 是否为青少年显示文本
})

// 错误信息
const errors = reactive({
    photo: '',
    realName: '',
    gender: '',
    idNo: ''
    // contactPhone: '',
    // telephone: '',
    // isJoin: '',
    // email: '',
    // regUnit: '',
    // isTeenager: ''
})

// 选择器索引
const genderIndex = ref(-1)
const nationalityIndex = ref(-1)
const politicaIndex = ref(-1)
const isJoinIndex = ref(0) // 默认选中"否"
const educationIndex = ref(-1)
const isTeenagerIndex = ref(0) // 默认选中"否"
const regUnitIndex = ref(-1) // 入会机构索引

// 会员ID（从URL参数获取）
const memberId = ref(null)

// 选项数据（从配置文件获取）
const genderOptions = config.form.genderText
const nationalityOptions = config.form.nations
const politicaOptions = config.form.political
const isJoinOptions = ['否', '是']
const isTeenagerOptions = ['否', '是']
const educationOptions = config.form.education
const regUnitOptions = ref([]) // 入会机构选项

// 获取性别显示文本
const getGenderText = (genderValue) => {
    if (!genderValue) return ''
    if (typeof genderValue === 'number') {
        return genderValue === 1 ? '男' : '女'
    }
    const index = config.form.gender.indexOf(genderValue)
    return index !== -1 ? config.form.genderText[index] : genderValue
}

// 获取入会机构列表
const fetchUnitList = async () => {
    try {
        const res = await getUnitList()
        if (res.code === 0 && res.data) {
            // 将返回的数据进行倒序排列
            // regUnitOptions.value = res.data.map(item => item.name || item).reverse()
            regUnitOptions.value = res.data.map(item => item.name || item)
        }
    } catch (error) {
        console.error('获取入会机构列表失败:', error)
    }
}

// 获取会员卡片信息
const fetchMemberCard = async () => {
    if (!memberId.value) {
        uni.showToast({
            title: '会员ID不存在',
            icon: 'none'
        })
        return
    }
    
    loading.value = true
    try {
        const res = await getMemberCard(memberId.value)
        console.log('会员卡片信息API返回:', res)
        if (res.code === 0 && res.data) {
            memberInfo.value = res.data
            fillFormData(res.data)
        } else {
            uni.showToast({
                title: res.msg || '获取会员信息失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('获取会员卡片信息失败:', error)
        uni.showToast({
            title: '获取会员信息失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}

// 回显表单数据
const fillFormData = (data) => {
    console.log('回显会员数据:', data)
    
    // 基本信息（只保留需要的字段）
    formData.memberNo = data.memberNo || ''
    formData.photo = data.photo || ''
    formData.realName = data.realName || ''
    formData.gender = data.gender || ''
    formData.idNo = data.idNo || ''
    formData.birthday = data.birthday || ''
    formData.nationality = data.nationality || ''
    // formData.contactPhone = data.contactPhone || ''
    // formData.telephone = data.telephone || ''
    // formData.politica = data.politica || ''
    // formData.isJoin = data.isJoin || 0
    // formData.isJoinText = data.isJoin === 1 ? '是' : '否'
    // formData.email = data.email || ''
    // formData.address = data.address || ''
    // formData.career = data.career || ''
    // formData.education = data.education || ''
    // formData.regUnit = data.regUnit || ''
    // formData.isTeenager = data.isTeenager || 0
    // formData.isTeenagerText = data.isTeenager === 1 ? '是' : '否'
    
    // 设置选择器索引
    if (data.gender) {
        // 处理性别字段，可能是数字(1男2女)或文本
        let genderText = data.gender
        if (typeof data.gender === 'number') {
            genderText = data.gender === 1 ? '男' : '女'
        }
        formData.gender = data.gender // 保持原始值
        const genderIdx = genderOptions.findIndex(item => item === genderText)
        genderIndex.value = genderIdx >= 0 ? genderIdx : -1
        console.log('性别索引设置:', genderIdx, '性别值:', data.gender, '性别文本:', genderText)
    }
    
    if (data.nationality) {
        const nationalityIdx = nationalityOptions.findIndex(item => item === data.nationality)
        nationalityIndex.value = nationalityIdx >= 0 ? nationalityIdx : -1
        console.log('民族索引设置:', nationalityIdx, '民族值:', data.nationality)
    }
    
    // 注释掉其他字段的索引设置
    // if (data.politica) {
    //     const politicaIdx = politicaOptions.findIndex(item => item === data.politica)
    //     politicaIndex.value = politicaIdx >= 0 ? politicaIdx : -1
    //     console.log('政治面貌索引设置:', politicaIdx, '政治面貌值:', data.politica)
    // }
    
    // if (data.education) {
    //     const educationIdx = educationOptions.findIndex(item => item === data.education)
    //     educationIndex.value = educationIdx >= 0 ? educationIdx : -1
    //     console.log('文化程度索引设置:', educationIdx, '文化程度值:', data.education)
    // }
    
    // isTeenagerIndex.value = data.isTeenager || 0
    // console.log('是否为青少年索引设置:', isTeenagerIndex.value, '是否为青少年值:', data.isTeenager)
    
    // if (data.regUnit) {
    //     const regUnitIdx = regUnitOptions.value.findIndex(item => item === data.regUnit)
    //     regUnitIndex.value = regUnitIdx >= 0 ? regUnitIdx : -1
    //     console.log('入会机构索引设置:', regUnitIdx, '入会机构值:', data.regUnit)
    // }
}

// 初始化表单数据
const initFormData = () => {
    // 设置默认值（注释掉不需要的字段）
    // formData.isJoin = 0
    // formData.isJoinText = '否'
    // isJoinIndex.value = 0
    
    // formData.isTeenager = 0
    // formData.isTeenagerText = '否'
    // isTeenagerIndex.value = 0
}

// 页面加载时初始化
onMounted(async () => {
    // 获取URL参数中的memberId
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const options = currentPage.options || {}
    memberId.value = options.id
    
    if (!memberId.value) {
        uni.showToast({
            title: '参数错误',
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1500)
        return
    }
    
    // await fetchUnitList() // 先获取入会机构列表（暂时不需要）
    await fetchMemberCard()
    // 只有在没有会员信息时才初始化默认表单数据
    if (!memberInfo.value) {
        initFormData()
    }
})

// 选择照片
const chooseavatar = async () => {
    uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
            const tempFilePath = res.tempFilePaths[0]
            
            // 显示上传中提示
            uni.showLoading({
                title: '上传中...'
            })
            
            try {
                // 立即上传照片
                const uploadResult = await uploadFile(tempFilePath)
                formData.photo = imageUrl + uploadResult.key // 存储上传后的URL
                
                uni.hideLoading()
                uni.showToast({
                    title: '照片上传成功',
                    icon: 'success'
                })
            } catch (error) {
                uni.hideLoading()
                console.error('照片上传失败:', error)
                uni.showToast({
                    title: '照片上传失败',
                    icon: 'none'
                })
            }
        },
        fail: (err) => {
            console.error('选择照片失败:', err)
            uni.showToast({
                title: '选择照片失败',
                icon: 'none'
            })
        }
    })
}

// 选择器事件处理
const onGenderChange = (e) => {
    genderIndex.value = e.detail.value
    formData.gender = config.form.gender[e.detail.value] // 存储数字值
    validateField('gender')
}

const onBirthdayChange = (e) => {
    formData.birthday = e.detail.value
}

const onNationalityChange = (e) => {
    nationalityIndex.value = e.detail.value
    formData.nationality = nationalityOptions[e.detail.value]
}

// 注释掉其他选择器事件处理
// const onPoliticaChange = (e) => {
//     politicaIndex.value = e.detail.value
//     formData.politica = politicaOptions[e.detail.value]
// }

// const onIsJoinChange = (e) => {
//     isJoinIndex.value = e.detail.value
//     formData.isJoin = e.detail.value
//     formData.isJoinText = isJoinOptions[e.detail.value]
//     validateField('isJoin')
// }

// const onIsTeenagerChange = (e) => {
//     isTeenagerIndex.value = e.detail.value
//     formData.isTeenager = e.detail.value
//     formData.isTeenagerText = isTeenagerOptions[e.detail.value]
//     validateField('isTeenager')
// }

// const onEducationChange = (e) => {
//     educationIndex.value = e.detail.value
//     formData.education = educationOptions[e.detail.value]
// }

// const onRegUnitChange = (e) => {
//     regUnitIndex.value = e.detail.value
//     formData.regUnit = regUnitOptions.value[e.detail.value]
//     validateField('regUnit')
// }


// 身份证号验证和信息提取
const validateIdCardAndExtractInfo = () => {
    errors.idNo = ''
    
    // 验证身份证号格式
    const idCardError = validateIdCardWithError(formData.idNo, '身份证号')
    if (idCardError) {
        errors.idNo = idCardError
        return
    }
    
    // 如果身份证号有效，提取信息
    if (formData.idNo && formData.idNo.length === 18) {
        try {
            // 提取出生日期
            const year = formData.idNo.substring(6, 10)
            const month = formData.idNo.substring(10, 12)
            const day = formData.idNo.substring(12, 14)
            const birthday = `${year}-${month}-${day}`
            formData.birthday = birthday
            
            // 提取性别 (第17位，奇数为男，偶数为女)
            const genderCode = parseInt(formData.idNo.substring(16, 17))
            const gender = genderCode % 2 === 1 ? 1 : 2
            formData.gender = gender
            
            // 更新性别选择器索引
            genderIndex.value = gender === 1 ? 0 : 1
            
            // 清除相关字段的错误提示
            errors.gender = ''
            
            console.log('身份证信息提取成功:', {
                birthday: formData.birthday,
                gender: formData.gender,
                genderIndex: genderIndex.value
            })
            
        } catch (error) {
            console.error('身份证信息提取失败:', error)
        }
    }
}

// 字段验证
const validateField = (field) => {
    errors[field] = ''

    switch (field) {
        case 'realName':
            errors.realName = validateRequired(formData.realName, '姓名')
            break
        case 'gender':
            errors.gender = validateSelect(formData.gender, '性别')
            break
        case 'idNo':
            errors.idNo = validateIdCardWithError(formData.idNo, '身份证号')
            break
        // 注释掉其他字段的验证
        // case 'contactPhone':
        //     errors.contactPhone = validatePhoneWithError(formData.contactPhone, '联系电话')
        //     break
        // case 'telephone':
        //     if (formData.telephone) {
        //         errors.telephone = validatePhoneWithError(formData.telephone, '工作电话')
        //     }
        //     break
        // case 'regUnit':
        //     errors.regUnit = validateSelect(formData.regUnit, '入会机构')
        //     break
        // case 'isTeenager':
        //     errors.isTeenager = validateSelect(formData.isTeenagerText, '是否为青少年')
        //     break
        // case 'email':
        //     if (formData.email) {
        //         errors.email = validateEmailWithError(formData.email)
        //     }
        //     break
    }
}

// 表单提交
const submitForm = async () => {
    // 验证所有必填字段（只保留需要的字段）
    const requiredFields = ['realName', 'gender', 'idNo']
    let isValid = true

    requiredFields.forEach(field => {
        validateField(field)
        if (errors[field]) {
            isValid = false
        }
    })

    // 验证选填字段（注释掉）
    // if (formData.email) {
    //     validateField('email')
    //     if (errors.email) {
    //         isValid = false
    //     }
    // }

    // if (formData.telephone) {
    //     validateField('telephone')
    //     if (errors.telephone) {
    //         isValid = false
    //     }
    // }

    if (!isValid) {
        uni.showToast({
            title: '请完善必填信息',
            icon: 'none'
        })
        return
    }

    // 显示加载提示
    uni.showLoading({
        title: '提交中...'
    })

    try {
        // 照片已经在选择时上传，直接使用URL
        const photoUrl = formData.photo

        // 准备提交数据（只保留需要的字段）
        const submitData = {
            memberId: memberId.value, // 会员ID
            memberNo: formData.memberNo, // 会员编号
            photo: photoUrl,
            realName: formData.realName,
            gender: formData.gender, // 直接使用存储的数字值
            idNo: formData.idNo,
            birthday: formData.birthday,
            nationality: formData.nationality
            // contactPhone: formData.contactPhone,
            // telephone: formData.telephone,
            // politica: formData.politica,
            // isJoin: formData.isJoin,
            // email: formData.email,
            // address: formData.address,
            // career: formData.career,
            // education: formData.education,
            // regUnit: formData.regUnit,
            // isTeenager: formData.isTeenager
        }

        // 提交表单
        const result = await editMemberCard(submitData)

        uni.hideLoading()

        if (result.code == 0) {
            // 显示成功提示
            uni.showToast({
                title: '您已提交证书修改申请，请等待工作人员审核',
                icon: 'none',
                duration: 2000
            })
            // 2秒后返回证书页面
            setTimeout(() => {
                uni.navigateBack()
            }, 2000)
        } else {
            uni.showToast({
                title: result.msg || '提交失败',
                icon: 'none'
            })
        }
    } catch (error) {
        uni.hideLoading()
        console.error('提交失败:', error)
        uni.showToast({
            title: '网络错误，请重试',
            icon: 'none'
        })
    }
}




</script>

<style lang="scss" scoped>
.vip-form-wrap {
    padding: 24rpx;
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 200rpx; /* 为固定底部按钮留出空间 */

    // 已是会员状态下的底部间距
    &.member-status {
        padding-bottom: 40rpx;
    }

    // 拒绝通知样式
    .reject-notice {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);

        .reject-content {
            .reject-title {
                font-size: 32rpx;
                font-weight: 600;
                color: #fff;
                margin-bottom: 12rpx;
            }

            .reject-reason {
                font-size: 28rpx;
                color: rgba(255, 255, 255, 0.9);
                line-height: 1.5;
            }
        }
    }

    // 会员通知样式
    .member-notice {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(40, 167, 69, 0.3);

        .member-content {
            .member-title {
                font-size: 32rpx;
                font-weight: 600;
                color: #fff;
                margin-bottom: 12rpx;
            }

            .member-desc {
                font-size: 28rpx;
                color: rgba(255, 255, 255, 0.9);
                line-height: 1.5;
            }
        }
    }

    // 审核中通知样式
    .auditing-notice {
        background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%);
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);

        .auditing-content {
            .auditing-title {
                font-size: 32rpx;
                font-weight: 600;
                color: #000;
                margin-bottom: 12rpx;
            }

            .auditing-desc {
                font-size: 28rpx;
                color: rgba(0, 0, 0, 0.9);
                line-height: 1.5;
            }
        }
    }

    // 加载状态样式
    .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60rpx 0;
        color: #666;
        font-size: 28rpx;
    }

    .title {
        font-size: 32rpx;
        font-weight: 600;
        line-height: 52rpx;
        color: #000;
        padding: 20rpx 10rpx;
    }

    .form-box,
    .signature-box {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 0 24rpx;
        border: 2rpx solid #E7E8EB;

        .form-item {
            height: 84rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2rpx solid #F6F6F6;

            &:last-child {
                border-bottom: none;
            }

            &.avatar-upload {
                height: auto;
                padding: 32rpx 0;
                align-items: flex-start;

                .upload-area {
                    flex: 1;
                    margin-left: 16rpx;
                    position: relative;
                    cursor: pointer;

                    .upload-placeholder {
                        width: 140rpx;
                        height: 140rpx;
                        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                        border: 3rpx dashed #dee2e6;
                        border-radius: 20rpx;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        position: relative;
                        overflow: hidden;
                        animation: pulse 2s infinite;

                        @keyframes pulse {
                            0%, 100% {
                                box-shadow: 0 0 0 0 rgba(249, 98, 62, 0.1);
                            }
                            50% {
                                box-shadow: 0 0 0 8rpx rgba(249, 98, 62, 0.1);
                            }
                        }

                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: linear-gradient(135deg, rgba(249, 98, 62, 0.1) 0%, rgba(255, 122, 90, 0.1) 100%);
                            opacity: 0;
                            transition: opacity 0.3s ease;
                        }

                        &:hover {
                            border-color: #F9623E;
                            transform: translateY(-2rpx) scale(1.02);
                            box-shadow: 0 8rpx 24rpx rgba(249, 98, 62, 0.15);
                            animation: none;

                            &::before {
                                opacity: 1;
                            }

                            .upload-icon-wrapper {
                                transform: scale(1.1) rotate(5deg);
                            }
                        }

                        &:active {
                            transform: translateY(0) scale(0.98);
                        }

                        .upload-icon-wrapper {
                            width: 48rpx;
                            height: 48rpx;
                            background: linear-gradient(135deg, #F9623E 0%, #FF7A5A 100%);
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 12rpx;
                            transition: all 0.3s ease;
                            box-shadow: 0 4rpx 12rpx rgba(249, 98, 62, 0.3);
                            position: relative;

                            &::before {
                                content: '';
                                width: 20rpx;
                                height: 16rpx;
                                background: #fff;
                                border-radius: 2rpx;
                                position: relative;
                            }

                            &::after {
                                content: '';
                                width: 8rpx;
                                height: 8rpx;
                                background: #fff;
                                border-radius: 50%;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }

                            .upload-icon {
                                display: none;
                            }
                        }

                        .upload-text {
                            font-size: 24rpx;
                            color: #495057;
                            font-weight: 500;
                            margin-bottom: 4rpx;
                        }

                        .upload-desc {
                            font-size: 20rpx;
                            color: #6c757d;
                        }
                    }

                    .uploaded-container {
                        width: 140rpx;
                        height: 140rpx;
                        position: relative;
                        border-radius: 20rpx;
                        overflow: hidden;
                        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        animation: slideIn 0.5s ease-out;

                        @keyframes slideIn {
                            from {
                                opacity: 0;
                                transform: translateY(20rpx) scale(0.9);
                            }
                            to {
                                opacity: 1;
                                transform: translateY(0) scale(1);
                            }
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            top: 8rpx;
                            right: 8rpx;
                            width: 24rpx;
                            height: 24rpx;
                            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            box-shadow: 0 2rpx 8rpx rgba(40, 167, 69, 0.3);
                            animation: checkmark 0.6s ease-out 0.3s both;

                            @keyframes checkmark {
                                0% {
                                    transform: scale(0) rotate(-45deg);
                                    opacity: 0;
                                }
                                50% {
                                    transform: scale(1.2) rotate(-45deg);
                                    opacity: 1;
                                }
                                100% {
                                    transform: scale(1) rotate(0deg);
                                    opacity: 1;
                                }
                            }
                        }

                        &::before {
                            content: '✓';
                            position: absolute;
                            top: 8rpx;
                            right: 8rpx;
                            width: 24rpx;
                            height: 24rpx;
                            color: #fff;
                            font-size: 16rpx;
                            font-weight: bold;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            z-index: 1;
                            animation: checkmarkText 0.6s ease-out 0.5s both;

                            @keyframes checkmarkText {
                                0% {
                                    opacity: 0;
                                    transform: scale(0);
                                }
                                100% {
                                    opacity: 1;
                                    transform: scale(1);
                                }
                            }
                        }

                        &:hover {
                            transform: translateY(-2rpx) scale(1.02);
                            box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
                        }

                        &:active {
                            transform: translateY(0) scale(0.98);
                        }

                        .uploaded-avatar {
                            width: 100%;
                            height: 100%;
                            border-radius: 20rpx;
                        }

                        .upload-overlay {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(135deg, rgba(249, 98, 62, 0.9) 0%, rgba(255, 122, 90, 0.9) 100%);
                            border-radius: 20rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            opacity: 0;
                            transition: all 0.3s ease;

                            .overlay-content {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;

                                .overlay-icon {
                                    width: 32rpx;
                                    height: 32rpx;
                                    margin-bottom: 8rpx;
                                    filter: brightness(0) invert(1);
                                    position: relative;

                                    &::before {
                                        content: '';
                                        width: 16rpx;
                                        height: 16rpx;
                                        background: #fff;
                                        border-radius: 50%;
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                    }
                                }

                                .overlay-text {
                                    color: #fff;
                                    font-size: 20rpx;
                                    font-weight: 500;
                                }
                            }
                        }

                        &:hover .upload-overlay {
                            opacity: 1;
                        }
                    }

                    .readonly {
                        cursor: default;
                        opacity: 0.8;

                        .upload-placeholder {
                            background: #f8f9fa;
                            border-color: #dee2e6;
                            color: #6c757d;
                            animation: none;

                            &:hover {
                                border-color: #dee2e6;
                                transform: none;
                                box-shadow: none;
                                animation: none;
                            }
                        }
                    }
                }
            }

            .label {
                font-size: 28rpx;
                color: rgba(0, 0, 0, 0.60);
                font-weight: 500;
                min-width: 160rpx;

                &.required::after {
                    content: '*';
                    color: #ff4757;
                    margin-left: 4rpx;
                }
            }

            .input {
                flex: 1;
                font-size: 28rpx;
                height: 84rpx;
                padding: 0 16rpx;
                background: #ffffff;
                text-align: right;
                position: relative;
                z-index: 1;

                &::placeholder {
                    color: rgba(0, 0, 0, 0.40);
                }

                &:disabled {
                    background: #f8f9fa;
                    color: #6c757d;
                    cursor: not-allowed;
                }
            }

            .picker {
                flex: 1;
                height: 84rpx;

                .picker-text {
                    height: 84rpx;
                    line-height: 84rpx;
                    padding: 0 16rpx;
                    font-size: 28rpx;
                    color: #333;
                    text-align: right;

                    &:empty {
                        color: rgba(0, 0, 0, 0.40);
                    }

                    &:empty::before {
                        content: attr(data-placeholder);
                    }
                }

                &:disabled {
                    .picker-text {
                        background: #f8f9fa;
                        color: #6c757d;
                        cursor: not-allowed;
                    }
                }
            }
        }

        .error-tip {
            padding: 8rpx 0 8rpx 160rpx;
            font-size: 24rpx;
            color: #ff4757;
            line-height: 1.4;
        }
    }

    .form-note {
        padding: 8rpx 0;
        font-size: 22rpx;
        color: #999;
        line-height: 1.4;
        text-align: left;
    }

    .signature-box {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 24rpx;

        .desc {
            font-size: 26rpx;
            color: rgba(0, 0, 0, 0.40);
            line-height: 44rpx;
            margin-bottom: 24rpx;
            text-align: justify;
            text-indent: 2em;
        }
    }

    .sign-title {
        padding-top: 0;
        padding-left: 0;
    }

    .sign-box {
        margin-bottom: 24rpx;
        border: 2rpx dashed #BBBCBE;
        overflow: hidden;

        .sign-placeholder {
            height: 300rpx;
            background: #f8f8f8;
            border: 2rpx dashed #BBBCBE;
            border-radius: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 28rpx;
        }

        .signature-preview {
            width: 100%;
            height: 200rpx;
            border-radius: 8rpx;
            // border: 2rpx solid #e0e0e0;
            transform: rotate(-90deg);
        }
    }

    .sign-btn-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16rpx;
    }

    .sign-btn {
        width: 112rpx;
        height: 44rpx;
        border: 2rpx solid #FA7A53;
        color: #FA7A53;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        transition: all 0.3s ease;

        &:active {
            background: #FA7A53;
            color: #fff;
        }
    }

    .reset-btn {
        width: 112rpx;
        height: 44rpx;
        background: #f5f5f5;
        color: #666;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        transition: all 0.3s ease;

        &:active {
            background: #e0e0e0;
        }
    }
}

.footer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - 48rpx);
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx 24rpx 28rpx 24rpx;
    z-index: 999;

    .primary-btn {

        &:active {
            transform: scale(0.98);
            box-shadow: 0 4rpx 12rpx rgba(249, 98, 62, 0.3);
        }
    }
}

// 成功弹窗样式
.success-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

    .popup-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }

    .success-popup-content {
        position: relative;
        width: 600rpx;
        background: #fff;
        border-radius: 24rpx;
        padding: 48rpx;
        text-align: center;
        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
        animation: popupSlideIn 0.3s ease-out;

        @keyframes popupSlideIn {
            from {
                opacity: 0;
                transform: translateY(40rpx) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .success-icon {
            width: 120rpx;
            height: 120rpx;
            margin: 0 auto 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .success-title {
            font-size: 36rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 24rpx;
        }

        .success-message {
            font-size: 28rpx;
            color: #666;
            line-height: 1.5;
            margin-bottom: 48rpx;
        }

        .success-btn {

            &:active {
                transform: scale(0.98);
                box-shadow: 0 4rpx 12rpx rgba(249, 98, 62, 0.3);
            }

            .btn-text {
                color: #fff;
            }
        }
    }
}
</style>